<template>
    <div style="width: 100%;">
        <div v-if="visible" style="margin: 20px 15px;">
            <Cell v-for="item in showData" :key="item.userId" center inset :border="true">
                <template #icon>
                    <img :src="prefix+item.iconUrl" class="avatar-icon" />
                </template>
                <template #title>
                    <span class="span-name">{{item.username}}</span>
                </template>
                <template #label>
                    <span class="span-no">{{item.sayHello}}</span>
                </template>
                <template #right-icon>
                    <div
                        style="display: flex;flex-direction: row;align-items: center;justify-content: center;border-spacing: 1px;">
                        <Button type="primary" style="margin-right: 5px;" hairline size="mini" plain
                            @click="openAccept(item)" class="two-button">添 加</Button>
                        <Button type="danger" hairline size="mini" plain @click="openRefuse(item)"
                            class="two-button">拒 绝</Button>
                    </div>
                </template>
            </Cell>
        </div>
        <div v-else class="container">
            <span class="span-no">暂无添加申请</span>
        </div>
    </div>
</template>
<script setup>
import { Cell, Image, Icon, SwipeCell, Dialog, Tag, Button, Popup, Form, Field } from 'vant';
import { getOssPrefix } from '@/v-api/properties';
import { computed, reactive, ref, onMounted } from 'vue';
import {acceptAdd,refuseAdd } from '@/v-api/addressbook/group';
import { Local } from '@/utils/storage';
const nickname = ref('');
const showData = ref([]);
const prefix = getOssPrefix();
onMounted(() => {
    showData.value = Local.get('groupAdd');
    console.log(showData.value);
});
const openAccept = (item) => {
    Dialog.confirm({
        title:'同意用户加入',
        message: `群聊：${item.groupName}`,
        showCancelButton: true,
        cancelButtonText: '取消',
    }).then(() => {
        acceptAdd(item.groupId,item.userId);
        showData.value = showData.value.filter(filt => (filt.userId !==item.userId||filt.groupId!==item.groupId));
    });

}
const openRefuse = (item) => {
    Dialog.confirm({
        title:'拒绝用户加入',
        message: `群聊："${item.groupName}"`,
        showCancelButton: true,
        cancelButtonText: '取消',
    }).then(() => {
        refuseAdd(item.groupId,item.userId);
        showData.value = showData.value.filter(filt => (filt.userId !==item.userId||filt.groupId!==item.groupId));
    });
}
const visible = computed(() => {
    if (showData.value.length === 0) return false;
    return true;
});
</script >
<style scoped>
.avatar-icon {
    width: 46px;
    height: 46px;
    border-radius: 20%;
    color: #cbf3bd;
    /* margin-left: 0.25rem; */
    margin-right: 0.3rem;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto
}

.span-name {
    font-size: 16px;
    color: #000;
}

.span-no {
    font-size: 14px;
    color: #8c8c8c;
    margin-top: 10%;
}

.label-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dbf5d2;
    color: #3ed607;
    font-weight: bold;
    font-size: 13px;
}

.label-title1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5d3d2;
    color: #d63707;
    font-weight: bold;
    font-size: 13px;
}

.h3-box {
    font-size: 15px;
    color: #000;
    justify-self: center;

}

.two-button {
    width: 40px;
    height: 30px;
}

.yes-or-no {
    /* margin:10px 20px 30px 30px; */
    margin-top: 10px;
    margin-bottom: 10px;
    width: 40%;
    height: 35px;
    margin-left: 10px;
    margin-right: 10px;

}
</style>